<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"  
                xmlns:h="http://java.sun.com/jsf/html"  
                xmlns:p="http://primefaces.prime.com.tr/ui" 
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:fn="http://java.sun.com/jsp/jstl/functions"
                template="Facelets/Templates/template.xhtml">  

    <ui:define name="content">

        <center>
            <div id="titulo" align="center" style="padding-top: 20px;">
                <p:fieldset>
                    <div style="text-align: center; float:left; width: 100%; padding-bottom: 20px;">
                    <span style="color:#22436C; font-size: 16px; font-family: tahoma; font-weight: bold;">SiAD - Sistema de Apoio didático</span> <br/>a maneira mais eficiente de administrar o apoio didático.
                    
                    </div>
                    <div style="text-align: center; float:left; width: 30%; clear: both;">
                        <br/>
                    </div>
                    <div style="text-align: center; float:left; width: 40%;" class="ui-widget">
                        <p:fieldset>
                            <table style="width: 100%;">
                                <tr>
                                    <td style="color:#22436C;">» </td>
                                    <td style="color: black;color: #06C;"> Realize suas atividades com rapidez, eficiência e segurança.</td>
                                </tr>
                                <tr>
                                    <td style="color:#22436C;">»</td>
                                    <td style="color: black;color: #06C;"> Tudo que você precisa em um só lugar</td>
                                </tr>
                                <tr>
                                    <td style="color:#22436C;">»</td>
                                    <td style="color: black;color: #06C;"> Utilize uma interface de interação muito amigável.</td>
                                </tr>
                            </table>
                        
                        </p:fieldset>
                    </div>
                    <div style="text-align: center; float:left; width: 30%;">
                        <br/>
                    </div>
                    </p:fieldset>
            </div>
            <div id="centralAjuda" style="clear: both; clear: left;width: 100%; padding-top: 20px; " class="ui-widget">
                <p:fieldset legend="Fácil aprendizado do usuário levado a sério">
                <p:lightBox>  
                <table>
                    <tr><td colspan="3" style="text-align: center;"><p:fieldset style="padding-top: 10px; padding-bottom: 20px;color:#22436C;"><br/><p> O SiAD leva o fácil aprendizado do usuário no uso da ferramenta a sério e para isso abaixo segue algumas breves<br/>
                            explicações criativas que podem lhe oferecer um auxílio de como realizar suas ações.</p></p:fieldset></td></tr>
                    <tr><td colspan="3" style="width: 819px;color: #06C; text-align: center; "> <br/><h:outputLink value="/imagens/galleria/alocacao_raques.jpg" title="Alocação de equipamentos em raques">  
                        <h:graphicImage value="/imagens/galleria/alocacao_raques.jpg" width="819" height="284" style="border: 0;"/>  
                    </h:outputLink>
                    <br/>
                Alocação de equipamentos em raques
                </td></tr>
                
                    <tr>
                    <td align="center" style="width: 250px;color: #06C;"> <br/>
                    <h:outputLink value="/imagens/galleria/cadastro_equipamento.jpg" title="Cadastre equipamentos">  
                        <h:graphicImage value="/imagens/galleria/cadastro_equipamento.jpg" width="250" height="100" style="border: 0;"/>  
                    </h:outputLink>  <br/>
                Cadastre equipamentos
                </td>
                <td align="center" style="width: 310px;color: #06C;">
                    <h:outputLink value="/imagens/galleria/consulta_lab.jpg" title="Consulte laboratórios cadastrados">  
                        <h:graphicImage value="/imagens/galleria/consulta_lab.jpg" width="250" height="100" style="border: 0;"/>  
                    </h:outputLink>  <br/>
                Consulte laboratórios cadastrados
                </td>
                <td align="center" style="width: 250px;color: #06C;">
                    <h:outputLink value="/imagens/galleria/tela_principal.jpg" title="Tela inicial">  
                        <h:graphicImage value="/imagens/galleria/tela_principal.jpg" width="250" height="100" style="border: 0;"/>  
                    </h:outputLink>  <br/>
                Tela inicial
                </td>
                </tr>
                </table>
                </p:lightBox>  
                </p:fieldset>
            </div>
                
        </center>
    </ui:define> 
</ui:composition>
